<template>
	<view class="login-content">
		<u-toast ref="uToast"></u-toast>
		<view class="title" >初吻</view>
		<view class="sub-title" >小库存</view></u-transition>
		<view class="login-btn-content">
			<view class="login-btn" @click="onLogin">立即进入</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			onLogin() {
				this.$toast.loading(this);
				// const _this = this;
				uni.login({
					provider: 'weixin',
					success: async res => {
						// console.log('code', res)
						const result = await this.$api.user.login(res.code);
						if(result.code == 200) {
							this.$toast.closeLoading(this);
							this.$cache.SET_USERINFO(result.data);
							// console.log('登录信息',result); // {openid: "oQIJg4-VxiOLgupcwj4sXvivN-dU",session_key: "9CcAcGCR/m6io5XwFeFlSQ=="}
							uni.redirectTo({ url: '../admin/index'});
						}
					}
				})
				// uni.redirectTo({ url: '../admin/index'});
			},
			// async onChooseAvatar(e) {
			// 	console.log('获取用户头像', e.detail.avatarUrl)
			// 	const res = await this.$utils.uploadImg(e.detail.avatarUrl);
			// 	console.log('img', res)
			// 	if (res.code == 200) {
			// 		this.avatar = res.data.url;
			// 		this.$toast.success(this, '上传成功');
			// 	}
			// },
		}
	}
</script>

<style lang="scss" scoped>
.login-content {
	height: 100vh;
	position: relative;
	background-color: $green-bg-color;
	
	.title {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 25%;
		font-size: 100rpx;
		color: white;
		letter-spacing: 8rpx;
		text-shadow: -10rpx 10rpx 5px rgba(0,0,0,0.2);
		// animation: titleAnimation;
		// animation-duration: 1s;
		// animation-delay: 0.1s;
	}
	.sub-title {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 35%;
		font-size: 80rpx;
		color: white;
		letter-spacing: 12rpx;
		text-shadow: -10rpx 10rpx 5px rgba(0,0,0,0.2);
		// animation: subTitleAnimation;
		// animation-duration: 1s;
		// animation-delay: 0.1s;
	}
	.login-btn-content {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 5%;
		// animation: btnAnimation;
		// animation-duration: 1s;
		// animation-delay: 0.1s;
	}
	.login-btn {
		width: 88%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 16rpx;
		letter-spacing: 4rpx;
		border: 2px solid white;
		box-shadow: -10rpx 10rpx 5px 0 rgba(0,0,0,0.2);
	}
	
	@keyframes titleAnimation {
		0%{
			top: 10%;
			opacity: 0;
		}
		100%{
			top: 25%;
			opacity: 1;
		}
	}
	@keyframes subTitleAnimation {
		0%{
			top: 10%;
			opacity: 0;
		}
		100%{
			top: 35%;
			opacity: 1;
		}
	}
	@keyframes btnAnimation {
		0%{
			bottom: 0%;
			opacity: 0;
		}
		100%{
			bottom: 5%;
			opacity: 1;
		}
	}
}
</style>
